<template>
  <div class="content">
    <div class="head">
      <mt-header class="common-header" title="视频播放">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
      </mt-header>
      <div id="video">站位</div>
      <div class="content-text-explain">
        <div class="content-text">
          <h3>盖碗茶艺手法教学</h3>
          <ul>
            <li class="love" @click="love">
              <img src="../../../assets/image/love.png" alt />
              <span>99w</span>
            </li>
            <li class="watch">
              <img src="../../../assets/image/watch.png" alt />
              <span>999w</span>
            </li>
          </ul>
        </div>
        <div class="explain">课程简介课程简介课程简介课程简介课程简介课程简介课程简 介课程简介课程简介</div>
      </div>
    </div>
    <div class="conetent-list">
      <div class="list-video" v-for="item in 4" :key="item">
        <img src="https://ds.wyadmin.cn/uploads/home/common/default_goods_image.jpg" alt />
        <div class="text" :class="{'active': item == 1}">
          第二节小节名...
          <span v-if="item == 1">(正在播放)</span>
        </div>
        <span>小节简介小节简介小节简介小节</span>
      </div>
    </div>
    <div>{{tailoring}}</div>
  </div>
</template>
<script>
export default {
  name: "CouresVideo",
  data() {
    return {
      // active:"active",
      name:'我是十多万的说的我'
    };
  },
  methods: {
    love() {
      console.log(1212);
    },
  },
  computed: {
    //   slice
    // 在播放视频的名称裁剪
    tailoring(){
        if(this.name.length > 6){
            this.name = this.name.slice(0,6) + '...' 
        }else{
            this.name = this.name
        }
        return this.name;
    }
  },
};
</script>
<style lang="scss" scoped>
.common-header {
  background: #f8f8f7;
  color: #101010;
}
#video {
  width: 100%;
  height: 11.25rem;
  background: chartreuse;
}
.content-text-explain {
  background: #ffffff;
  border-bottom: 1px solid #eeeff2;
  .content-text {
    display: flex;
    padding: 0.9rem 0;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      height: 0.78rem;
      line-height: 0.78rem;
      overflow: hidden;
      font-size: 0.8rem;
      color: #101010;
      padding-left: 1rem;
    }
    ul {
      margin: 0 1.65rem 0 0;
      padding: 0;
      display: flex;
      vertical-align: middle;
      li {
        color: #b5b5b5;
        vertical-align: middle;
        span {
          font-size: 0.6rem;
        }
      }
      li.love {
        margin-right: 0.87rem;
      }
      li.love img {
        width: 0.62rem;
        margin-right: 0.4rem;
      }
      li.watch img {
        width: 0.75rem;
        margin-right: 0.4rem;
      }
    }
  }
  .explain {
    width: 16.15rem;
    margin: auto;
    padding-bottom: 1rem;
    font-size: 0.6rem;
    color: #b5b5b5;
  }
}

.conetent-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 0 0.7rem;
  margin-top: 2.1rem;
  box-sizing: border-box;
  font-size: 0;
  .list-video {
    width: 8.2rem;
    margin-bottom: 1rem;
    // margin-right: 0.5rem;
    img {
      width: 8rem;
      height: 6.15rem;
      border-radius: 0.5rem;
    }
    .active {
      color: #3c7c45 !important;
      span {
        color: #3c7c45 !important;
      }
    }

    .text {
      font-size: 0.6rem;
      color: #101010;
      margin: 0.5rem 0;
    }
    span {
      font-size: 0.45rem;
      color: #b5b5b5;
    }
  }
}
</style>